<template>
	<view>
		<u-navbar
			title="积分商城"
			:autoBack="true"
			placeholder
		>
		</u-navbar>
		<view class="points-header" :style="{backgroundColor: appColor}">
			<view class="points-header-1">
				<text class="iconfont icon-jifen" style="font-size: 48rpx;"></text>
				<text class="points-num" style="font-size: 48rpx;">{{userInfo.score}}</text>
			</view>
			<view class="points-header-2">
				<text class="points-header-2-1" @click="toPointsRecord">积分明细</text>
				<view class="points-header-2-line"></view>
				<text class="points-header-2-2" @click="toPointsOrderRecord">兑换记录</text>
			</view>
		</view>
		<view style="background-color: #fff;">
			<u-tabs @click="tabClick" :current="curCategory" :lineColor="appColor" :activeStyle="{color: appColor}" :list="list1"></u-tabs>
		</view>
		<template v-if="loading">
			<u-skeleton avatarSize="48" avatarShape="square" style="margin-bottom: 32rpx;" :loading="loading" avatar rows="3" v-for="i in 4" :key="i"></u-skeleton>
		</template>
		<template v-else-if="!loading && dataList.length === 0">
			<u-empty
			    mode="data"
				icon="http://cdn.uviewui.com/uview/empty/data.png"
			>
			</u-empty>
		</template>
		<template v-else-if="!loading && dataList.length > 0">
			<scroll-view :scroll-y="true" :style="{height: scrollViewHeight}">
				<view style="padding: 16rpx;">
					<u-row customStyle="margin-bottom: 8px" gutter="8" v-for="(rowItem, rowIndex) in list" :key="rowIndex">
						<u-col span="6" v-for="(colItem, colIndex) in rowItem" :key="colIndex">
							<PointsItem :info="colItem"/>
						</u-col>
					</u-row>
				</view>
			</scroll-view>
		</template>
	</view>
</template>

<script>
	import PointsItem from '@/components/pointsItem'
	import {mapState} from 'vuex';
	import {goodsScoreCategory, goodsScoreInfo} from '@/api/me.js';
	import {chunkArr} from '@/utils/index.js'
	export default {
		components: {
			PointsItem
		},
		data() {
			return {
				curCategory: 0,
				list1: [],
				dataList: [], // 认养列表
				loading: true,
				status: 'loadmore',
				pageNo: 1,
				pageSize: 6,
			}
		},
		computed: {
			...mapState(['appInfo', 'userInfo']),
			appColor() {
				return this.appPrimaryColor || '#f40215'
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 - 44 - 140 + 'px';
			},
			list() {
				return chunkArr(this.dataList, 2);
			}
		},
		onShow() {
			this.loading = true;
			goodsScoreCategory().then(res => {
				this.list1 = res.result;
				if(res.result.length > 0) {
					this.goodsScoreInfo()
				} else {
					this.loading = false;
				}
				
			})
		},
		methods: {
			tabClick({index}) {
				this.curCategory = index;
				this.pageNo = 1;
				this.goodsScoreInfo();
			},
			changeTag({key}) {
				if(this.curIndex === key) return
				this.pageNo = 1;
				this.curIndex = key;
				this.$nextTick(() => {
					this.goodsScoreInfo();
				})
			},
			// 详情页面
			toDetail(item) {
				this.$cuNavigateTo(`/pages/foster/fosterDetail?id=${item.id}`);
			},
			// 获取认养列表
			goodsScoreInfo() {
				if(this.pageNo === 1) {
					this.loading = true;
				}
				let postObj = {
					goodsCategory: this.list1[this.curCategory].id,
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}
				goodsScoreInfo(postObj).then(res => {
					const {current, pages, records} = res.result;
					if(this.pageNo === 1) {
						let empty = [];
						this.dataList = empty.concat(records);
					} else {
						this.dataList = this.dataList.concat(records);
					}
					if(current >= pages) {
						this.status = 'nomore'
					} else {
						this.pageNo ++;
						this.status = 'loading'
					}
				}).finally(() => {
					this.loading = false;
				});
			},
			
			handleScroll({detail}) {
				if (detail.scrollTop > 100) {
					this.color = '#000';
					this.bgColor = '#fff';
					this.border = true;
				} else {
					this.color = 'transparent';
					this.bgColor = 'transparent';
					this.border = false;
				}
			},
			onLower() {
				if(this.status === 'loading') {
					this.goodsScoreInfo();
				}
			},
			toPointsRecord() {
				this.$cuNavigateTo('/pages/me/pointsRecord');
			},
			toPointsOrderRecord() {
				this.$cuNavigateTo('/pages/me/pointsOrderRecord');
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>


<style lang="scss" scoped>
	.points-header {
		height: 140px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		color: #fff;
		.points-header-1 {
			display: flex;
			align-items: center;
			justify-content: center;
			.points-num {
				padding-left: 16rpx;
			}
		}
		.points-header-2 {
			margin-top: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.points-header-2-1 {
				font-size: 28rpx;
				line-height: 28rpx;
				padding-right: 16rpx;
			}
			.points-header-2-line {
				height: 28rpx;
				width: 2rpx;
				background-color: #fff
			}
			.points-header-2-2 {
				font-size: 28rpx;
				line-height: 28rpx;
				padding-left: 16rpx;
			}
		}
	}
</style>